<template>
  <div>
    <el-row>
      <el-button type="primary" @click="showDialog()">新增分类</el-button>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        border
        row-key="id"
        :default-sort="{prop: 'id', order: 'ascending'}"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="id" label="分类ID" sortable width="100"></el-table-column>
        <el-table-column prop="name" label="分类名称" sortable></el-table-column>
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="en_name" label="别名(英译)" ></el-table-column>
        <el-table-column prop="remark" label="备注" width="500"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.parentid==0"
              title="添加二级分类"
              @click="showDialog(scope.row)"
            >添加二级分类</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delCategory(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog :title="editId==-1?'添加分类':'编辑分类'" :visible="dialogFormVisible" @close="handleClose">
      <el-form :model="form" ref="addform" label-width="120px">
        <el-form-item label="父级分类" prop="parentId" v-if="form.parentId!=0">
          <span class="parent-name">{{ form.parentName }}</span>
        </el-form-item>
        <el-form-item label="分类名称" prop="name" :rules="[{required: true, message: '请输入分类名称'}]">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类编码" prop="code" :rules="[{required: true, message: '请输入分类编码'}]">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类别名(英译)" prop="en_name" :rules="[{required: true, message: '请输入分类别名'}]">
          <el-input v-model="form.en_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      editId: -1,
      form: {
        name: "",
        remark: "",
        code: "",
        parentId: 0,
        en_name:"",
        parentName: "",
        thumbnail: "",
        editid: 0
      }
    };
  },
  mounted() {
    this.loadCategory();
  },
  methods: {
    showDialog(prow) {
      if (prow !== undefined) {
        this.form.parentName = prow.name;
        this.form.parentId = prow.id;
      } else {
        this.form.parentId = 0;
        this.form.parentName = "";
      }
      this.dialogFormVisible = true;
    },
    handleEdit(index, row) {
      if (row !== undefined && row.parentid !== 0) {
        for (let r of this.tableData) {
          if(r.id==row.parentid){
            this.form.parentName = r.name;
            this.form.parentId = r.id;
            break
          }
        }
      } else {
        this.form.parentId = 0;
        this.form.parentName = "";
      }
      this.editId = row.id;
      this.form.editid = row.id;
      this.dialogFormVisible = true;
      Object.assign(this.form, row);
    },

    handleClose() {
      this.editId = -1;
      this.dialogFormVisible = false;
      this.$nextTick(() => {
          this.$refs.addform.resetFields();
          this.form.name = "";
          this.form.remark = "";
          this.form.thumbnail = "";
          this.form.code = "";
          this.form.editid = 0;
          this.form.en_name=""
      });
    },
    loadCategory() {
      this.axios
        .get("/category/category-list", {})
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.rows;
          }
        })
        .catch(() => {
          this.$message.error("获取列表失败");
        });
    },
    addCategory() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          if(this.editId==-1){
            this.axios
            .post("/category/category-add", this.form)
            .then(res => {
              if (res.code == 200) {
                this.$message.success("添加分类成功");
                this.loadCategory();
              }else if(res.code==507){
                this.$message.error("分类编码或名称重复");
                return
              }
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.$message.error("添加分类失败");
              this.dialogFormVisible = false;
            });
          }else{
            this.axios
            .post("/category/category-edit", this.form)
            .then(res => {
              if (res.code == 200) {
                this.$message.success("修改分类成功");
                this.loadCategory();
              }else if(res.code==507){
                this.$message.error("分类编码或名称重复");
                return
              }
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.$message.error("修改分类失败");
              this.dialogFormVisible = false;
            });
          }
          
        }
      });
    },
    delCategory(indexId,category){
      this.axios
        .post("/category/category-del",{id:category.id})
        .then(res => {
          if(res.code==200){
            this.$message.success("删除成功");
          }else if(res.code==204){
            this.$message.error("已使用分类，请先取消关联继续删除");
          }
          this.loadCategory()
        })
        .catch(() => {
          this.$message.error("删除分类失败");
        });
    }
  }
};
</script>

<style lang="less" scoped>
.parent-name {
  font-weight: bold;
  font-size: 18px;
}
</style>
